<template lang="pug">
.page-wrap
    .login-w
        img(src="../../assets/images/leftTar.png").left
        .right
            .login-box
                .box-title 知识库
                .error {{errorMsg}}
                .info-li
                    el-icon(size="20" color="#fff")
                        UserFilled
                    input(placeholder="用户名" v-model="userName" @keyup="enterKey($event)" @input="errorMsg=''")
                .info-li
                    el-icon(size="20" color="#fff")
                        Lock
                    input(placeholder="密码" :type="type" v-model="password" @keyup="enterKey($event)" @focus="type='password'"  @input="errorMsg=''")
                .bot-wrap
                    el-checkbox(v-model="checked" size="small") 记住密码
                .btn-wrap
                    el-button(@click="login()" type="primary" size="large") 登录
    .bot-info version:{{ buildInfo.buildTime }}

</template>

<script setup>

import { ref, onMounted } from 'vue'
import apis from '@/apis'
import { useRouter, useRoute } from 'vue-router'
import { storageClear, storageSet, Encrypt, Decrypt } from '@/utils'

import env from '@/utils/env.js'
const buildInfo = ref(env || {})

const router = useRouter()
const route = useRoute()

const type = ref('password')
const userName = ref('')
const password = ref('')
const errorMsg = ref('')
const checked = ref(false)
const enterKey = (event) =>{
    if (event.key == 'Enter' && userName.value.length > 0 && password.value.length > 0){
        login()
    }
}
onMounted(()=>{
    storageClear()
    //自动登录
    let autoLogin = localStorage.getItem('MODEDATA')
    if(autoLogin){
        autoLogin = Decrypt(autoLogin).split('|')
        userName.value = autoLogin[0]
        password.value = autoLogin[1]
        login()
    }
})
const login = () =>{//登录
    if(!userName.value.trim() || !password.value.trim()){
        errorMsg.value = '账号或密码不能为空'
        return
    }
    apis.systemLogin({
        userName: userName.value.trim(),
        password: password.value.trim()
    }).then((res) => {
        if(res.status == 1){
            storageSet('token', res.data.token)
            storageSet('permission', res.data.permission)
            storageSet('userInfo', res.data)

            router.push({
                path: '/knowledgeRetrieval'
            })
            //自动登录
            if(checked.value){
                localStorage.setItem('MODEDATA', Encrypt(userName.value.trim() + '|' + password.value.trim()))
            }
        }else{
            errorMsg.value = res.msg
        }
    })
}
</script>

<style lang="less" scoped>
@import '@/assets/theme.less';
.page-wrap{
    height: 100vh;
    width: 100vw;
    background: url(../../assets/images/bg.png) no-repeat 0 0 /cover;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-around;
    .login-w{
        position: absolute;
        left: 50%;
        top:50%;
        transform: translate(-50%, -50%);
        display: flex;
        align-items: center;
        .left{
            margin-right: 100px;
            width: 835px;
            height: 469px;
        }
        span{
            color: #fff;
            font-size: 18px;
        }
    }
    .login-box{
        width: 280px;
        background: url('../../assets/images/login-box.png') no-repeat 0 0;
        background-size: 100% 100%;
        height: 360px;
        padding: 60px 20px;
        border-radius: 4px;
        .box-title{
            line-height: 40px;
            text-align: center;
            font-size: 20px;
            font-weight: bold;
            color: #fff;
        }
        .error{
            font-size: 12px;
            line-height: 20px;
            height: 20px;
            margin-top:20px;
            color: red;
        }
        .info-li{
            border: 1px solid #ccc;
            height: 40px;
            border-radius: 2px;
            display: flex;
            align-items: center;
            padding-left: 5px;
            margin-bottom: 20px;
            input{
                height: 100%;
                line-height: 100%;
                padding: 0 10px;
                margin-left: 5px;
                flex-grow: 1;
                background: transparent;
                color: #fff;
            }
        }
        .bot-wrap{
            line-height: 20px;
            margin-top: -10px;
            :deep( .el-checkbox){
                height: 20px;
                .el-checkbox__label{
                    color: #fff;
                }
            }
        }
        .btn-wrap{
            margin-top: 17px;
            text-align: center;
            :deep( button){
                width: 100%;
            }
        }
    }
    .bot-info{
        position: absolute;
        width: 100%;
        bottom: 10px;
        font-size: 12px;
        display: flex;
        flex-direction: column;
        align-items: right;
        color:#ccc;
        opacity: .2;
    }
    .bot-pop{
        position: absolute;
        color: #fff;
        right: 20px;
        bottom: 10px;
        font-size: 12px;
    }
    .bot-left{
        position: absolute;
        right: 20px;
        top: 10px;
        font-size: 16px;
        a{
            color: blue !important;
            border-bottom: 1px solid blue;
        }
    }
}
</style>